<script setup>
import { ref } from 'vue'

const props = defineProps({
  total: {
    type: Number,
    required: true
  }
})

// 实现分页需要的参数
const pageSize = ref(5)
const page = ref(1)

const emit = defineEmits(['pageChange', 'pageSizeChange'])

// 处理页码变化
const handleCurrentChange = (newPage) => {
  emit('pageChange', newPage)
}

// 处理页面显示数据条数的变化
const handleSizeChange = (newSize) => {
  emit('pageSizeChange', newSize)
}
</script>

<template>
  <div>
    <el-pagination
      background
      layout="jumper,total,sizes,prev,pager,next"
      :page-sizes="[2, 3, 5, 10]"
      :default-page-size="5"
      v-modl:page-size="pageSize"
      v-modl:current-page="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="props.total"
    />
  </div>
</template>

<style lang="scss" scoped></style>
